<script>
// 导入API模块
import apiAuth from "@/api/auth.js";
import apiStations from "@/api/stations";

export default {
  // 生命周期函数
  onLaunch: function () {
    console.log("App Launch"); // 应用初始化时触发

    // 根据本地存储的token获取用户信息
    const authToken = uni.getStorageSync("auth-token");
    if (authToken) {
      apiAuth
        .detail({ authToken })
        .then((res) => {
          // 将用户信息和token存入Vuex store
          this.$store.dispatch("updateAuth", { ...res.data, token: authToken });
        })
        .catch(() => {
          uni.removeStorageSync("auth-token"); // 请求失败时清除无效token
        });
    }

    // 获取所有站点数据
    apiStations
      .get()
      .then((res) => this.$store.dispatch("updateStations", res.data)) // 存入Vuex store
      .catch(() => {}); // 错误处理暂未实现
  },
  onShow: function () {
    console.log("App Show"); // 应用切换到前台时触发
  },
  onHide: function () {
    console.log("App Hide"); // 应用切换到后台时触发
  },
};
</script>

<style lang="scss">
/* 引入uView UI库基础样式 */
@import "uview-ui/index.scss";
@import "uview-ui/libs/css/flex.scss";

/* 自定义工具类 */
.u-flex-shrink-0 {
  flex-shrink: 0; // 防止元素收缩
}

/* 通过Sass循环生成间距工具类（基于uni.scss中的$spacers变量） */
@each $key, $val in $spacers {
  // 边距类
  .mt-#{$key}, .my-#{$key}, .m-#{$key} { margin-top: $val; }
  .mb-#{$key}, .my-#{$key}, .m-#{$key} { margin-bottom: $val; }
  .ms-#{$key}, .mx-#{$key}, .m-#{$key} { margin-left: $val; }
  .me-#{$key}, .mx-#{$key}, .m-#{$key} { margin-right: $val; }
  
  // 内边距类
  .pt-#{$key}, .py-#{$key}, .p-#{$key} { padding-top: $val; }
  .pb-#{$key}, .py-#{$key}, .p-#{$key} { padding-bottom: $val; }
  .ps-#{$key}, .px-#{$key}, .p-#{$key} { padding-left: $val; }
  .pe-#{$key}, .px-#{$key}, .p-#{$key} { padding-right: $val; }
  
  // 圆角类
  .rounded-#{$key} { border-radius: $val; }
}

/* 将间距变量映射为CSS自定义属性 */
:root {
  @each $key, $val in $spacers {
    --space-#{$key}: #{$val};
    --rounded-#{$key}: #{$val};
  }
}

/* 通过Sass循环生成颜色文本类（基于uni.scss中的$colors变量） */
@each $key, $val in $colors {
  .text-#{$key} { color: $val; }
}

/* 将颜色变量映射为CSS自定义属性 */
:root {
  @each $key, $val in $colors {
    --color-#{$key}: #{$val};
  }
}

/* 全局页面基础样式 */
page {
  background-color: $u-bg-color; // 使用uView主题背景色
}

/* 页面布局相关类 */
.p-page {
  @extend .p-base; // 继承基础内边距
}

.page-box-x-overflow {
  margin-left: calc(var(--space-base) * -1); // 横向溢出补偿
  margin-right: calc(var(--space-base) * -1);
}
.page-box-t-overflow {
  margin-top: calc(var(--space-base) * -1); // 顶部溢出补偿
}

.page-box {
  @extend .bg-white, .rounded-sm; // 白色背景+小圆角
  & + .page-box { @extend .mt-base; } // 相邻元素间距
}

/* 定位工具类 */
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }

/* 背景色类 */
.bg-white { background-color: #ffffff; }

/* 文字样式类 */
.fw-bold { font-weight: bold; }
.text-center { text-align: center; }
.text-end { text-align: end; }

/* 宽度工具类 */
.w-100 { width: 100%; }

/* TrainItem组件专用样式 */
.TrainItem {
  .OrderInfo { // 订单信息文字样式
    font-size: 14px;
    color: var(--color-info);
  }

  .Time { // 时间显示样式
    font-size: 18px;
    font-weight: bold;
  }
  .Station { // 站点文字样式
    font-size: 14px;
    color: var(--color-main);
  }

  .OptionItem { // 操作项布局样式
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-base) 0;
    color: var(--color-primary);
  }

  &.lg { // 大尺寸变体
    .Time { font-size: 22px; }
    .Station { font-size: 15px; }
  }
}
</style>